Skip to main content

styling和themes

经过再三权衡和实验，本课程决定还是不用NativeWind组件，也就是不以tailwindcss的方式来做设计。 未来它的发展再完善成熟一些，我们可能会考虑。

1. Styling​

统一定义和管理​

  • 预先统一定义风格，减少各自分散的定义；
  • 用钩子useStyle调用，因为涉及到Theme（明暗）变化；

Constants​

Colors​

  • 类型命名
  • 2个Theme风格
  • 没有美工的情况下，可以请AI设计

Sizes​

  • 屏幕尺寸
  • 标准尺寸
  • spacing

实用库​

  • 第三方还是自建
  • 常用元素
  • 组合Style
  • 记住不是组件设计

2. Themes​

系统明暗判断​

整体导航风格上下文​

  • navigator
  • statusbar
  • 默认值修改
  • 状态加入hook（useStyle）

风格切换​

本节课采用的是跟随系统风格变化的方式，macos可以用Command + Shift + A切换Simulator模拟器（ios）来测试。

手动切换​

待之后全局变量教程补充。

做一个组件，3种状态切换，分别是System（默认）/Dark/Light； 选择结果需要持久化，以便之后开启App保持选择。

3. 总结​

设计思路和原则：

  1. App整体风格统一，包括色彩、尺寸（sizes/spacing）；
  2. 元素复用，最大化减少单个页面和组件styling；
  3. 最大化减少inline的styling，必须个性化处尽可能采用组合css方式；
  4. 元素设计和命名吸取tailwinds的风格；
  5. 部分变量需要全局持久化保存（待之后教程）；